<template>
  <a-select :value="value" :clearable="select.allowClear"
             :placeholder="select.placeholder" @change="change($event)">
    <a-select-option v-for="option in options" :value="option.value" :key="option.value">{{option.title}}</a-select-option>
  </a-select>
</template>

<script>
  export default {
    name: "Select",
    data() {
      return {
        options: []
      }
    },
    props: {
      select: {
        type: Object,
        default() {
          return {
            options:[],
            allowClear:false,
            placeholder:"请选择",
            key: ''
          }
        }
      },
      value:{
        type: String,
        default: "",
      }
    },
    methods: {
      //父组件中的v-model等于子组件的属性value和@input
      change: function(value) {
        console.log(value);
        //将这个值抛出去，使父组件能够接受到这个值
        this.$emit('input', value);
      },
      getSelectData() {
        if (this.select.options && this.select.options.length > 0) {
          this.options = this.select.options;
          return;
        }
        if (!this.select.key || this.select.key === '') {
          return;
        }
        this.$store.dispatch("getSelectData", {key: this.select.key}).then(selectData => {
          this.options = selectData;
        }).catch(err=> {
          console.log(err);
        })
      }
    },
    created() {
      this.getSelectData();
    }
  }
</script>

<style scoped>

</style>
